<template>
	<view class="shop">
		<view class="shop-item">
			<view class="shop-big">
				<image class="shop-big" src="../../static/img/shop.jpg"></image>
			</view>
			<scroll-view scroll-x="true" class="scroll-contet">
				<view class="scroll-item">
					<Commodity 
					:dataCommodityList="shopList"
					wrap="no-wrap"
					itemW="200rpx"
					bigH="200rpx"></Commodity>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import Commodity from '@/components/common/Commodity.vue';
	export default {
		data() {
			return {
				shopList: [
					{
						id: 1,
						imgUrl: "../../static/img/commodity1.jpg",
						name: "绒毛大衣2022火爆款",
						pprice: "299",
						oprice: "999",
						discount: "5.2"
					},
					{
						id: 2,
						imgUrl: "../../static/img/commodity2.jpg",
						name: "绒毛大衣2022火爆款",
						pprice: "299",
						oprice: "999",
						discount: "5.2"
					},
					{
						id: 3,
						imgUrl: "../../static/img/commodity3.jpg",
						name: "绒毛大衣2022火爆款",
						pprice: "299",
						oprice: "999",
						discount: "5.2"
					},
					{
						id: 4,
						imgUrl: "../../static/img/commodity3.jpg",
						name: "绒毛大衣2022火爆款",
						pprice: "299",
						oprice: "999",
						discount: "5.2"
					},
					{
						id: 5,
						imgUrl: "../../static/img/commodity3.jpg",
						name: "绒毛大衣2022火爆款",
						pprice: "299",
						oprice: "999",
						discount: "5.2"
					}
				]
			}
		},
		components: {
			Commodity
		}
	}
</script>

<style scoped>
.shop-big{
	width: 100%;
	height: 350rpx;
}
.scroll-item{
	display: inline-block;
}
.scroll-contet{
	width: 100%;
	white-space: nowrap;
}
</style>